<template>

	<div id="app" class="container">
		<div class="card mb-3">
			<div class="card-header bg-dark text-white">
				作业要求
			</div>
			<div class="card-body">
				<ol>
					<li>渲染表格的数据，并显示每一个学生的总分，<b class="text-danger">PS</b>:并不需要添加总分这一字段。</li>
					<li>在表单中填写数据，点击录入按钮，插入新的学生成绩。</li>
					<li>点击表格的表头（数学、语文、英语），对应的数据按照从大到小排序，<b class="text-danger">再次点击</b>从小到大排序。</li>
					<li>选择班级，填入学生姓名，点击搜索按钮，<b class="text-danger">高亮</b>显示符合条件的学生</li>
					<li>选择科目，填入分数最小值，最大值，验证两个数值大小顺序，点击筛选按钮，<b class="text-danger">高亮</b>符合条件的学生</li>
					<li><b class="text-danger">附加题</b>：选择科目，填入分数最小值，最大值，验证两个数值大小顺序，点击筛选按钮，
						<b class="text-danger">只显示</b>符合条件的学生
					</li>
				</ol>
			</div>
		</div>
		<div class="card mb-3">
			<div class="card-header text-white bg-dark">
				录入成绩
			</div>
			<div class="card-body">
				<form>
					<div class="mb-3 row">
						<label class="col-sm-2 col-form-label">姓名：</label>
						<div class="col-sm-10">
							<input v-model.trim="form.name" type="text" class="form-control" placeholder="请输入学生姓名">
						</div>
					</div>
					<div class="mb-3 row">
						<label class="col-sm-2 col-form-label">班级：</label>
						<div class="col-sm-10">
							<select v-model.trim="form.class" class="form-select">
								<option disabled value="">请选择班级</option>
								<option value="三年级1班">三年级1班</option>
								<option value="三年级2班">三年级2班</option>
								<option value="三年级3班">三年级3班</option>
							</select>
						</div>
					</div>
					<div class="mb-3 row">
						<label   class="col-sm-2 col-form-label">数学：</label>
						<div class="col-sm-10">
							<input  v-model.trim="form.Math" type="number" class="form-control" placeholder="请输入数学成绩">
						</div>
					</div>
					<div class="mb-3 row">
						<label class="col-sm-2 col-form-label">语文：</label>
						<div class="col-sm-10">
							<input  v-model.trim="form.Chinese"  type="number" class="form-control" placeholder="请输入语文成绩">
						</div>
					</div>
					<div class="mb-3 row">
						<label class="col-sm-2 col-form-label">英语：</label>
						<div class="col-sm-10">
							<input v-model.trim="form.English" type="number" class="form-control" placeholder="请输入英语成绩">
						</div>
					</div>
					<div class="mb-3">
						<button @click="handleAdd" type="button" class="btn btn-secondary">录入</button>
					</div>
				</form>
			</div>
		</div>
		<div class="card mb-3">
			<div class="card-header text-white bg-dark">
				筛选搜索
			</div>
			<div class="card-body">
				<form>
					<div class="mb-3 row">
						<label class="col-sm-1 col-form-label">搜索</label>
						<div class="col-sm-5">
							<select  v-model="find.findclass" class="form-select">
								<option disabled value="">请选择班级</option>
								<option value="三年级1班">三年级1班</option>
								<option value="三年级2班">三年级2班</option>
								<option value="三年级3班">三年级3班</option>
							</select>
						</div>
						<div class="col-sm-6">
							<div class="input-group">
								<input  v-model="find.findname" type="text" class="form-control" placeholder="请输入学生姓名">
								<button   @click="handleFind(scores)" class="btn btn-secondary" type="button">
									搜索
								</button>
							</div>
						</div>
					</div>
					<div class="mb-3 row">
						<label class="col-sm-1 col-form-label">筛选</label>
						<div class="col-sm-2">
							<select v-model="pick.subject" class="form-select">
								<option  value="Math">数学</option>
								<option value="Chinese">语文</option>
								<option value="English">英语</option>
							</select>
						</div>
						<div class="col-sm-4">
							<input  v-model="pick.min" type="text" class="form-control" placeholder="分数最小值">
						</div>
						<div class="col-sm-1 text-center">——</div>
						<div class="col-sm-4">
							<div class="input-group">
								<input  v-model="pick.max" type="text" class="form-control" placeholder="分数最大值">
								<button @click="handlePick(scores)" class="btn btn-secondary" type="button">筛选</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
		<table class="table table-bordered">
			<thead class="table-dark">
				<tr>
					<th>#</th>
					<th>班级</th>
					<th>姓名</th>
					<th @click="handleSort('Math')">数学</th>
					<th @click="handleSort('Chinese')">语文</th>
					<th @click="handleSort('English')">英语</th>
					<th>总分</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in scores" :class="{active: item.selected}"  v-show='item.hide'>
					<td>{{index+1}}</td>
					<td>{{item.class}}</td>
					<td>{{item.name}}</td>
					<td>{{item.Math}}</td>
					<td>{{item.Chinese}}</td>
					<td>{{item.English}}</td>
					<td>{{item.Chinese+item.Math+item.English}}</td>
				</tr>
				
			</tbody>
		</table>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				find:{
					findname:'',
					findclass:'',
					
					
				},
					
				pick:{
					subject:'Math',
					min:'',
					max:'',
					
				},
				// apple:false,
				form:{
					name:'',
					class:'',
					Math:'',
					Chinese:'',
					English:'',
				},
				Mathorder:1,
				Chineseorder:1,
				Englishorder:1,
			  scores:[
			  	{ name: 'Bob', class: '三年级2班', Math: 97, Chinese: 89, English: 67 ,selected: false,hide:true},
			  	{ name: 'Tom', class: '三年级1班', Math: 67, Chinese: 52, English: 98 ,selected: false ,hide:true },
			  	{ name: 'Jerry', class: '三年级2班', Math: 72, Chinese: 87, English: 89 ,selected:  false,hide:true},
			  	{ name: 'Ben', class: '三年级1班', Math: 92, Chinese: 87, English: 59 , selected:  false,hide:true},
			  	{ name: 'Chan', class: '三年级3班', Math: 47, Chinese: 85, English: 92 ,selected:  false,hide:true },
			  ]
			}
		},
		methods:{
			// 添加
			handleAdd(){
				this.form.Math=this.form.Math-0;
				this.form.Chinese=this.form.Chinese-0;
				this.form.English=this.form.English-0;
				var add = JSON.parse(JSON.stringify(this.form));
				this.scores.push(add)
			},
			// 排序
			handleSort(key){
				this[key + 'order'] = -this[key + 'order'];
				var self = this;
				this.scores.sort(function(itemA, itemB) {
				return (itemA[key] - itemB[key]) * self[key + 'order'];
				});
			},
			// 查找
			handleFind(scores){
				let self= this;
			 
				this.scores.forEach(function(item) {
				 item.selected=false;	
				 if((item.name.includes(self.find.findname)) &&  (item.class.includes(self.find.findclass)) ){
								item.selected = true;
							} 
				});
			},
			// 筛选
			// handlePick(scores){
			// 	let self=this;
				
			// 	this.scores.forEach(function(item) {
			// 	 item.selected=false;	
			// 	 let score= self.pick.subject;
			
			// 	 if(self.pick.min<item[score]&&item[score]<self.pick.max){
			// 					item.selected = true;
			// 				} 
			// 	});
			// }
			// 二次筛选
			handlePick(scores){
				
				
				this.scores.forEach((item,index)=> {
				 item.selected=false;	
				 item.hide=false;
				 let score= this.pick.subject;
			
				 if(this.pick.min<item[score]&&item[score]<this.pick.max){
								item.selected = true;
								item.hide=true;
							} 
				});
			}
		}
	}
	
</script>

<style>
	.active{
		background-color: yellow;
	}
</style>
